<%--
  Created by IntelliJ IDEA.
  User: 檬zhu
  Date: 2021/12/13
  Time: 22:10
  To change this template use File | Settings | File Templates.
--%>
<%@page import="com.example.ordersystem.domain.Dish" %>
<%@page import="java.util.List" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/layui/css/layui.css">

    <style type="text/css">
        * {
            box-sizing: border-box;
        }

        body {
            margin-left: 7%;
            margin-top: 35px;
        }

        .card {
            width: 450px;
            height: 150px;
            border: 1px solid lightgrey;
            margin: 0 15px 15px 0;
            background: #fff;
            overflow: auto;
        }

        .card img {
            float: left;
            margin-top: 10px;
            margin-bottom: 10px;
        }

        .card .content {
            float: left;
            margin-left: 20px;
        }

        .card .name {
            color: #333;
            font: 10px/1.6 tahoma, arial, sans-serif;
            font-size: 18px;
        }

        .card .price {
            font-size: 14px;
            font-weight: bold;
            color: red;
        }
    </style>
    <title></title>
</head>
<body>
<%
    @SuppressWarnings("unchecked")
    List<Dish> dishes = (List<Dish>) request.getAttribute("dishes");
    for (Dish dish : dishes) {
%>
<div class='card'>
    <img alt="" src="<%=dish.getDisplayPicture()%>"
         style="height: 150px;width:200px ">
    <div class='content'>
        <p class="name"><%=dish.getName()%>
        </p>
        <p class="price">￥<%=dish.getPrice() %>
        </p>
        <button type="button" style="color: lightpink;background-color: #c0ffb3;width: 70px;height: 30px"
                onclick="detail(<%=dish.getNum()%>)">详情
        </button>
        <button type="button" style="color: lightblue;background-color:#ff896b;width: 70px;height: 30px"
                onclick="isHidden('amount+<%=dish.getNum()%>')">订购
        </button>
        <iframe name="formsubmit" style="display:none;">
        </iframe>
        <form action="${pageContext.request.contextPath}/customer/addDishitem" target="formsubmit">
            <div id="amount+<%=dish.getNum()%>" style="margin-top:10px; display: none">
                <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"
                        onclick="adder('a+<%=dish.getNum()%>')">
                    <i class="layui-icon layui-icon-up"></i>
                </button>
                <input type="text" style="width: 40px;height: 30px;text-align: center;" id="a+<%=dish.getNum()%>"
                       value="1" name="quantity">
                <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"
                        onclick="minuser('a+<%=dish.getNum()%>')">
                    <i class="layui-icon layui-icon-down"></i>
                </button>
                <!-- 隐藏提交菜品的编号,单价 -->
                <input type="hidden" name="categoryNum" value="<%=dish.getCategoryNum()%>">
                <input type="hidden" name="num" value="<%=dish.getNum()%>">
                <input type="hidden" name="name" value="<%=dish.getName()%>">
                <input type="hidden" name="price" value="<%=dish.getPrice()%>">
                <input type="hidden" name="picture" value="<%=dish.getPicture()%>">

                <button type="submit" class="layui-btn" onclick="success('a+<%=dish.getNum()%>')">好的</button>
            </div>
        </form>
    </div>
    <!-- 隐藏商品的描述，在点击弹出框的时候，弹出商品的描述 -->
    <DIV id="<%=dish.getNum()%>" style="display: none"><%=dish.getDescription()%>
    </DIV>
</div>
<%
    }
%>
<script src="${pageContext.request.contextPath}/resources/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['element', 'layer'], function () {
        let element = layui.element;
        let layer = layui.layer;
    });
</script>
<script type="text/javascript">
    //查看商品详情介绍
    function detail(i) {
        //获取id名叫 i
        let d = document.getElementById(i).innerHTML;
        layer.open({
            title: '商品介绍'
            , content: '<div style="padding: 50px; line-height: 22px; background-color: #effffb;font-weight: 300;">' + d
        });
    }
</script>

<script type="text/javascript">
    //查看商品详情介绍
    function success(a) {
        let count = document.getElementById(a).value;
        let con = '已为小主成功加餐' + count + '份<br>可在订单中取消哦';
        if (isNaN(count))//输入非数字
            con = '小主加餐姿势不对哦<br>请重新输入';
        layer.msg(con, {
            time: 1500, //1.5s后自动关闭
            btn: ['明白了', '知道了', '哦']
        });
    }
</script>

<script type="text/javascript">
    //点击向上箭头，数量加1
    function adder(a) {
        let count = document.getElementById(a).value;
        if (isNaN(count))//输入非数字
            count = 1;
        else if (count < 10)
            count = parseInt(count) + 1;
        document.getElementById(a).value = count;
    }

    //点击向下箭头，数量减1
    function minuser(a) {
        let count = document.getElementById(a).value;
        if (isNaN(count))//输入非数字
            count = 1;
        else if (count <= 1) {
            count = 1;
        } else {
            count = parseInt(count) - 1;
        }
        document.getElementById(a).value = count;
    }
</script>

<script type="text/javascript">
    function isHidden(oDiv) {//点击订购按钮时，显示数量加减选项
        let vDiv = document.getElementById(oDiv);
        vDiv.style.display = (vDiv.style.display === 'none') ? 'block' : 'none';
    }
</script>

</body>
</html>